<template>
	<div class="containerAll me-orderInfo">
		<div v-bind:class="[info.state != 'RECEIVED'&& info.state != 'CLOSE' ] ? '':'orderinfobox-bottom'">
			<div class="title">
				<span class="status">{{info.stateEnum}}</span>
				<img class="clearFloat" :src="statusimg" />
			</div>
			<div class="info">
				<img src="https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/addr_default.png" />
				<p class="contentPFir">
					<span>{{info.consignee}}</span>
					<span class="contentPhone">{{info.phone}}</span>
				</p>
				<p class="contentPSec">{{info.address}}</p>
			</div>
			<div class="goodsItemInfo">
				<div class="itemTop flex flex-item-between">
					<div class="leftImg left">
						<img class="leftImgIn" v-lazy='info.attaUrl' />
					</div>
					<div class="word left flex flex-c">
						<p class="wordTitle">{{info.goodsName}}</p>
						<p class="wordPrice flex flex-item-between flex-item-v-center">
							<span>{{info.goodsNorm}}</span>
							<span class="num">×{{info.counts}}</span>
						</p>
						<p class="wordColor">￥{{info.price|fixedTwo()}}</p>
					</div>
				</div>
				<div class="itemBottom">
					<p class="itemMP">
						<span class="left">商用总价</span>
						<span class="right clearFloat black">¥{{info.amount|fixedTwo()}}</span>
					</p>
					<p class="itemMP">
						<span class="left">商品优惠券</span>
						<span class="right clearFloat black">¥{{info.couponAmount|fixedTwo()}}</span>
					</p>
					<p v-if="info&&info.isVip=='Y'" class="itemMP">
						<span class="left">花卡会员97折</span>
						<span class="right clearFloat black">-¥{{info.couponAmount|fixedTwo()}}</span>
					</p>
					<p v-if="info.downPayAmount&&info.instalmentAmount&&info.payType!='CMBC'&&info.state!='UNPAY'" class="itemMP">
						<span class="left">{{info.state=='UNPAY'||info.state=='UNDOWNPAY'||info.downPayType=='无' ? '待':'已'}}支付差额金额<span class='mintext'>(使用优惠券后金额)</span></span>
						<span class="right clearFloat black">¥{{info.downPayAmount|fixedTwo()}}</span>
					</p>
					<div v-if="info.payType!='CMBC'&& info.state!='UNPAY'&&info.downPayAmount&&info.instalmentAmount" class='linmlt'></div>
					<p class="itemMP" v-if="info.downPayAmount&&info.instalmentAmount&&info.state!='UNPAY'&&info.state!='UNDOWNPAY'&&info.payType!='CMBC'">
						<span class="left">差额支付方式</span>
						<span class="right clearFloat black">{{info.downPayType=='无' ? '未支付':info.downPayType}}</span>
					</p>
					<p class="itemMP" v-if="info.state!='UNPAY'&&info.state!='UNDOWNPAY'&&info.instalmentAmount">
						<span class="left">支付方式</span>
						<span class="right clearFloat black">{{info.payTypeName}} </span>
					</p>
					<p class="itemMP" v-else-if="info.state!='UNPAY'&&info.state!='UNDOWNPAY'&&!info.instalmentAmount">
						<span class="left">支付方式</span>
						<span class="right clearFloat black">{{info.downPayType}}</span>
					</p>
					<p class="itemMP" v-if="info.instalmentAmount&&info.payType!='CMBC'&&info.state!='UNPAY'">
						<span class="left">分期金额</span>
						<span class="right clearFloat black">¥{{info.instalmentAmount|fixedTwo}}</span>
					</p>
					<p v-if="info&&info.isVip=='Y'" class="itemMP">
						<span class="left">运费</span>
						<span class="right clearFloat black">{{info.freight==0 ? '花卡会员免运费': (info.freight|fixedTwo())}}</span>
					</p>
					<p  class="itemMP" v-else-if="info&&info.isVip=='N'">
						<span class="left">运费</span>
						<span class="right clearFloat black">¥{{info.freight|fixedTwo()}}</span>
					</p>
					<p class="itemMP">
						<span class="left">总计</span>
						<span class="right clearFloat black">¥{{info.payAmount|fixedTwo()}}</span>
					</p>
				</div>
			</div>
			<div class="orderInfo">
				<p class="itemMP">
					<span class="left">订单号</span>
					<span class="right clearFloat black">{{info.orderNo}}</span>
				</p>
				<p class="itemMP">
					<span class="left">创建时间</span>
					<span class="right clearFloat black">{{info.orderTime}}</span>
				</p>
				<p class="itemMP" v-if="info.completeTime">
					<span class="left">完成时间</span>
					<span class="right clearFloat black">{{info.completeTime}}</span>
				</p>
				<p class="itemMP" v-if="info.logistics && info.state!='CLOSE'">
					<span class="left">物流公司</span>
					<span class="right clearFloat black">{{info.logistics}}</span>
				</p>
				<p class="itemMP" v-if="info.logistics && info.state!='CLOSE'">
					<span class="left">运单号</span>
					<span class="right clearFloat black">{{info.logisticsNo}}</span>
				</p>
			</div>
			<div class='logisticsinfo' v-if='logisticsinfo'>
				<div v-for="(item,index) in logisticsinfo" keys="index" class="logisticsitem " v-bind:class="[index==0 ? 'logisticsindex_one':'']">
					<div class="left_round"> </div>
					<div class='left_border'> </div>
					<div class='flex flex-c'>
						<span class='logisticstext'>{{item.acceptStation}} </span>
						<span class='logisticstime'> {{item.acceptTime}} </span>
					</div>
				</div>
			</div>

		</div>
		<button class="pay" v-if="info.state=='UNPAY'||info.state=='UNDOWNPAY'" @click="btnTap($event)" v-bind:disabled="isDisabled">去支付</button>
		<button class="pay"  @click="btnTap($event)" v-else-if="info.state=='WAITSEND'||info.state=='UNDOWNPAY'||info.state=='ACCESS'">{{info.state=='ACCESS' ? '申请退款':'申请退货'}}</button>
		<div class="Tapcall flex flex-item-center flex-c" v-else="info.state=='RECEIVED'||info.state=='CLOSE'">
			<template v-if="info.state=='RECEIVED'">
				<span>您的订单已关闭,如果疑问请联系客服：<span class="color-noclose" @click="btnTap($event)">{{info.customerPhone||'4006682866'}}</span></span>
				<span>（周一至周日:早9点至晚8点）</span>
			</template>
			<template v-else>
				<span class="received">申请退货：<span class="color-noclose" @click="btnTap($event)">{{info.customerPhone||'4006682866'}}</span></span>
				<span>（周一至周日:早9点至晚8点）</span>
			</template>
		</div>
	</div>
</template>

<script>
	import MeScroll from 'mescroll'
	import http from '@/util/http'
	import Api from '@/util/api'
	export default {
		data() {
			return {
				info: {},
				logisticsinfo: '',
				isDisabled:false
			}
		},
		created: function() {
			http.post(Api.orderGetOrder, {
				'id': this.$route.query.id,
				'platform': "H5"
			}).then(res => {
				console.log(res)
				if(res.code == 200) {
					this.info = res.data;
					var logisticsDesc;
					if((res.data.state == 'WAITRECEIVE' || res.data.state == 'RECEIVED') && res.data.logisticsNo) {
						if(res.data.logisticsDesc && res.data.logisticsDesc.indexOf('[') == 0) {
							logisticsDesc = JSON.parse(res.data.logisticsDesc)
						} else {
							logisticsDesc = [];
							logisticsDesc.push({
								acceptStation: "卖家已发货",
								acceptTime: "卖家已发货",
								remark: null
							})
						}
						this.logisticsinfo = logisticsDesc
					}

				} else {
					this.toast(res.message)
				}

			})
		},
		methods: {
			btnTap(e) {
				console.log(this.info)
				if(this.info.state == 'UNPAY' || this.info.state == 'UNDOWNPAY') {
					this.isDisabled=true;
					http.post(Api.checkOrder,{
						id: this.$route.query.id,
						platform: "H5",
					}).then((d) => {
						if(d.code == 200) {
							if(!d.data) {this.toast("该订单已过期");return;}
							var data = d.data;
							if(data.state == 'UNPAY' || data.state == 'UNDOWNPAY') {
								var param = {orderId: d.data.id}
								this.$router.push("pay/pay-center?orderId="+ d.data.id)
								this.isDisabled=false
							}
						} else {
							this.isDisabled=false
							this.toast(d.message);
						}
					}).catch((e) => {
						this.isDisabled=false;
						this.toast("网络错误,请检查您的网络！");
					})
				} else{
					window.location.href = 'tel:'+(this.info.customerPhone||'4006682866')
				}
			}
		},
		computed: {
			statusimg() {
				if(this.info.state == 'UNDOWNPAY' || this.info.state == 'UNPAY' || this.info.state == 'PAY') {
					return "https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/status_wait.png";
				} else if(this.info.state == 'ACCESS') {
					return "https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/status_recriver.png"
				} else if(this.info.state == 'WAITSEND') {
					return "https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/status_Grouphe.png"
				} else if(this.info.state == 'WAITRECEIVE') {
					return "https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/status_Group.png"
				} else if(this.info.state == 'RECEIVED') {
					return "https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/status_ok.png"
				} else if(this.info.state == 'CLOSE') {
					return "https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/status_error.png"
				}
			}
		},
		filters: {
			fixedTwo(price) {
				if(price) {
					return Number(price / 100).toFixed(2);
				}
				return "0.00";
			}

		}
	}
</script>

<style lang="less" rel="stylesheet/less">
	@import '../../assets/less/main.css';
	.orderinfobox-bottom {
		padding-bottom: 1rem;
	}
	
	p {
		width: 100%;
	}
	
	.me-orderInfo {
		position: relative;
		height: 100%;
		background-color: #F2F2F2;
		.title {
			height: 1.28rem;
			line-height: 1.28rem;
			padding: 0 .3rem;
			background: #FBC200;
			.status {
				color: #FFFFFF;
				font-size: .3rem;
			}
			img {
				width: .64rem;
				height: .64rem;
				float: right;
				margin-top: .32rem;
			}
		}
		.info {
			padding: .2rem 0 .2rem .88rem;
			height: .82rem;
			background: #FFFFFF;
			position: relative;
			img {
				width: .42rem;
				height: .42rem;
				position: absolute;
				top: .38rem;
				left: .3rem;
			}
			.contentPFir {
				height: .4rem;
				line-height: .4rem;
				font-size: .28rem;
				color: #464646;
				.contentPhone {
					margin-left: .36rem;
				}
			}
			.contentPSec {
				height: .33rem;
				line-height: .33rem;
				color: #909090;
				font-size: .24rem;
			}
		}
		.goodsItemInfo {
			background: #FFFFFF;
			.itemTop {
				padding: .3rem;
				height: 1.4rem;
				border-bottom: 1px solid #F2F2F2;
				border-top: 1px solid #F2F2F2;
				.leftImg {
					width: 1.32rem;
					height: 1.32rem;
					border: 1px solid #E6E6E6;
					border-radius: .06rem;
					position: relative;
					img {
						width: 1.32rem;
						height: 1.32rem;
						position: absolute;
						top: 0;
						left: 0;
						bottom: 0;
						right: 0;
						margin: auto;
					}
				}
				.word {
					font-size: .32rem;
					.wordTitle {
						color: #464646;
						width: 5.27rem;
						height: .45rem;
						line-height: .45rem;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}
					.wordColor {
						width: 5.27rem;
						margin-top: .15rem;
						white-space: nowrap;
						font-weight: 600;
						color: #464646;
						text-overflow: ellipsis;
						overflow: hidden;
					}
					.wordPrice {
						color: #909090;
						margin-top: .02rem;
					}
					.wordPrice,
					.wordColor {
						width: 100%;
						font-size: .28rem;
						height: .4rem;
						line-height: .4rem;
					}
				}
			}
			.itemBottom {
				padding: .3rem;
			}
			.itemBottom {
				color: #909090;
				font-size: .3rem;
				.linmlt {
					height: 0;
					border-bottom: 1px solid #eee;
					margin: .3rem 0;
				}
				.itemMP {
					height: .52rem;
					line-height: .52rem;
					.left {
						.mintext {
							font-size: .2rem;
							color: #ff4c5d;
						}
					}
					.coupon {
						color: #FC314C;
						font-size: .2rem;
					}
					.black {
						color: #464646;
					}
				}
			}
		}
		.orderInfo {
			margin-top: .18rem;
			padding: .3rem;
			color: #909090;
			font-size: .3rem;
			background: #FFFFFF;
			.itemMP {
				height: .52rem;
				line-height: .52rem;
				.coupon {
					color: #FC314C;
					font-size: .2rem;
				}
				.black {
					color: #464646;
				}
			}
		}
		.logisticsinfo {
			font-size: .24rem;
			background-color: #fff;
			padding: 0 .3rem .1rem .7rem;
			text-align: justify;
			color: #909090;
			.logisticsitem {
				position: relative;
				padding-bottom: .1rem;
				margin-bottom: .3rem;
				border-bottom: 1px solid #f5f5f5;
			}
			.left_border {
				position: absolute;
				height: 90%;
				top: .25rem;
				left: -.3rem;
				width: 0;
				border-left: .03rem solid #909090;
			}
			.left_round {
				position: absolute;
				top: 0;
				left: -.32rem;
				width: .08rem;
				height: .08rem;
				border-radius: .04rem;
				background-color: #909090;
			}
			.logisticsindex_one {
				color: #fbc200;
				.left_round {
					left: -.34rem;
					width: 6px;
					height: 6px;
					border-radius: 3px;
					background-color: #fbc200;
					box-shadow: 0px 0px 5px #fbc2ff;
				}
			}
			.logisticsindex_one .left_border {
				border-color: #fbc200;
			}
			.logisticstime {
				margin-top: .1rem;
			}
		}
		.pay {
			border: none;
			border-radius: 0 ;
			width: 100%;
			height: 1rem;
			line-height: 1rem;
			text-align: center;
			color: #464646;
			font-size: .32rem;
			background: #FBC200;
			position: fixed;
			bottom: 0;
			&:active,&:invalid,&:focus{
				border: none;
				background: #FBC200;
				box-shadow: none;
			}
		}
		.Tapcall {
			margin-top: .6rem;
			padding: 0 .3rem;
			font-size: .24rem;
			height: .35rem;
			line-height: .35rem;
			color: #909090;
			background: none;
			.received {
				font-size: .3rem;
			}
			.color-noclose {
				color: #FF4C5D;
			}
		}
	}
</style>